<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>洛克王国攻略中心</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
        
       
     
    </style>
</head>
<body>
    <div class="header">
        <h1>洛克王国攻略中心</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        <div class="columns">
            <!-- 资讯栏 -->
            <div class="column">
                <div class="card">
                    <h2>资讯</h2>
                    <div class="card-item">
                        <a href="https://roco.qq.com/" target="_blank">洛克王国官网</a>
                    </div>
                    <div class="card-item">
                        <a href="https://roco.qq.com/webplat/info/news_version3/397/838/839/840/m681/list_1.shtml">最新活动</a>
                    </div>
                    <div class="card-item">
                        <a href="https://tieba.baidu.com/f?kw=%E6%B4%9B%E5%85%8B%E7%8E%8B%E5%9B%BD" target="_blank">贴吧</a>
                    </div>
                </div>
            </div>
            
            <!-- 百科栏 -->
<div class="column">
    <div class="card">
        <h2>百科</h2>
        <div class="card-item">
            <a href="resources/images/1.png" target="_blank">属性克制关系</a>
        </div>
        <div class="card-item">
            <a href="resources/images/3.png" target="_blank">宠物性格详解</a>
        </div>
        <div class="card-item">
            <a href="resources/images/2.png" target="_blank">宠物装备系统</a>
        </div>
    </div>
</div>
            
            <!-- 工具栏 -->
            <div class="column">
                <div class="card">
                    <h2>工具</h2>
                    <div class="card-item">
                        <a href="http://39.101.162.174:8080/start" class="game-link">24点小游戏</a>
                    </div>
                    <div class="card-item">
                        <a href="https://theuselessweb.com/" class="game-link">神秘链接</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

</body>
</html>